<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="../js/axios.min.js" type="text/javascript"></script>
    <script src="../js/vue.js" type="text/javascript"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>我的钱包</title>
</head>
<body>
<div id="app">
    <el-row style="margin-top: 150px;">
        <el-col :span="8" :offset="8">
            <el-card shadow="hover" style="width: 100%;">
                <div slot="header" class="clearfix">
                    <span style="font-size: 22px; font-weight: bold">账户余额：</span>
                    <span style="font-size: 22px; font-weight: bold">{{balance}}</span>
                </div>
                <div style="font-size: 22px;text-align: center;">
                    <el-button type="primary" @click="inShow=true">充值</el-button>
                    <el-button type="primary" plain @click="show=true">提现</el-button>
                </div>
                <div style="margin-top: 25px;"></div>
            </el-card>
        </el-col>
    </el-row>
    <!--提现弹出框-->
    <el-dialog title="提现" :visible.sync="show" width="30%" style="font-size: 18px; font-weight: bold">
        <span style="font-size: 16px; font-weight: bold" placeholder="请输入金额">提现金额</span><br><br>
        <el-input v-model="form.money" style="font-size: 16px; font-weight: bold"></el-input>
        <span style="font-size: 16px; font-weight: bold" placeholder="请输入密码">支付密码</span><br><br>
        <el-input v-model="form.password" style="font-size: 16px; font-weight: bold" show-password></el-input>
        <span slot="footer" class="dialog-footer">
            <el-button @click="show=false">取 消</el-button>
            <el-button type="primary" @click="cashOut()">确 定</el-button>
        </span>
    </el-dialog>
    <!--充值对话框-->
    <el-dialog title="充值" :visible.sync="inShow" width="30%" style="font-size: 18px; font-weight: bold">
        <span style="font-size: 16px; font-weight: bold" placeholder="请输入金额">充值金额</span><br><br>
        <el-input v-model="inMoney" style="font-size: 16px; font-weight: bold"></el-input>
        <span slot="footer" class="dialog-footer">
            <el-button @click="inShow=false">取 消</el-button>
            <el-button type="primary" @click="cashIn()">确 定</el-button>
        </span>
    </el-dialog>
    <!--支付宝支付页面跳转-->
    <div v-html="alipayForm" ref="payDiv"></div>
<!--    <a :href="'/account/cashIn/'+inMoney"  target="_top">确 定</a>-->

</div>
<script>
    new Vue({
        el: "#app",
        data(){
            return {
                balance: "0.00",
                show: false,// 显示提现对话框
                inShow: false,// 显示充值对话框
                form:{
                    money: 0.00,
                    password:""
                },
                inMoney: 0.00,
                alipayForm: ""
            }
        },
        methods: {
            // 查询账户余额
            getBalance(){
                axios.get("/account/getBalance").then(resp=>{
                    if(resp.status === resp.data.code){
                        this.balance = resp.data.data
                    }
                })
            },
            // 提现
            cashOut(){
                axios.put("/account/cashOut", this.form).then(resp=>{
                    if(resp.status === resp.data.code){
                        this.getBalance()
                        this.$message({
                            type: 'success',
                            message: '提现成功'
                        });
                        this.show=false
                    }else{
                        this.$message({
                            type: 'warning',
                            message: resp.data.message
                        });
                    }
                })
            },
            // 充值
            cashIn(){
                axios.put("/account/cashIn?money="+this.inMoney).then(resp=>{
                    if(resp.status === resp.data.code){
                        this.alipayForm = resp.data.data
                        this.$nextTick(()=>{this.$refs.payDiv.children[0].submit()})
                        // this.getBalance()
                        // this.$message({
                        //     type: 'success',
                        //     message: '充值成功'
                        // });
                        this.show=false
                    }else{
                        this.$message({
                            type: 'warning',
                            message: resp.data.message
                        });
                    }
                })
            }
        },
        created() {
            this.getBalance()
        }
    })
</script>
</body>
</html>